<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #outter {
            width: 150px;
            height: 150px;
            background: #d70c8f;
        }
        #middle {
            width: 110px;
            height: 110px;
            background: #a3cdea;
        }
        #inner {
            width: 70px;
            height: 70px;
            background: #f5e4c4;
        }
        #dot {
            position: absolute;
            width: 30px;
            height: 30px;
            background: #aaa;
            border-radius: 50%;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div id="outter" data-color="#d70c8f">
        <div id="middle" data-color="#a3cdea">
            <div id="inner" data-color="#f5e4c4"></div>
        </div>
    </div>
    <div id="dot"></div>
    <script>
        var outter = document.getElementById('outter')
        var dot = document.getElementById('dot')
        outter.onclick = function (e) {
            // console.log('小红块被点击');
            console.log(e.target);
            var item = e.target;
            //2. 取出对应颜色, 设置到dot
            dot.style.background = item.dataset['color']
        }

        var body = document.querySelector('body')
        body.onmousemove = function (e) {
            // console.log('鼠标移动');
            // console.log(e.pageX, e.pageY);
            dot.style.left = e.pageX -15 + 'px'
            dot.style.top = e.pageY - 15 + 'px'
        }

        // var middle = document.getElementById('middle')
        // middle.onclick = function () {
        //     console.log('小蓝块被点击');
        // }

        // var inner = document.getElementById('inner')
        // inner.onclick = function () {
        //     console.log('小黄块被点击');
        // 
    </script>
</body>
</html>